<template>
<div>
    <el-dialog title="修改用户" :visible.sync="thistype" @close="fun(tname)" @open="openwidth">
        <div>
            <div class="titlenav">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-row :gutter="20">
                        <el-col :span="14">
                            <el-form-item label="标题">
                                <el-input v-model="form.title" placeholder="标题"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="选择类型">
                                <el-select v-model="form.idChannel" placeholder="类型" v-if="channellistview">
                                    <el-option v-for="i in channellistview" :label="i.name" :value="i.id" :key="i.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <div ref="width" class="widthcontent"></div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="uptext">保存</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import wangeditor from 'wangeditor'
import {
    http,
    channellist,
    file,
    article
} from '../../api/api'
export default {
    props: ['type', 'fun', 'tname', 'tablerow'],
    data() {
        return {
            thistype: this.type, //模态框状态
            formtype: { //数据
                account: '', //账号
                name: '', //昵称
                birthday: '', //生日
                sex: "1", //性别
                email: '', //邮箱
                phone: '', //电话
                deptid: '', //部门id
                status: "0", // 状态
            },
            form: '',
            channellistview: '',
            editor: '',
        }
    },
    mounted() {

    },
    methods: {
        openwidth() {
            //对话框打开时的回调
            this.$nextTick(() => {
                this.editor = new wangeditor(this.$refs.width)
                this.editor.config.showLinkImg = false
                this.editor.config.uploadImgServer = '/upload'
                this.editor.config.uploadImgMaxLength = 1
                this.editor.config.customUploadImg = (files, insert) => {
                    // files 是 input 中选中的文件列表
                    // insert 是获取图片 url 后，插入到编辑器的方法
                    let f = files[0]
                    let d = new FormData
                    d.append('file', f)
                    this.$http.post(http + file, d, {
                        headers: {
                            'constnet-type': 'multipart/form-data',
                            'Authorization': localStorage.token
                        }
                    }).then((data) => {
                        if (data.data.msg == '成功') {
                            insert(data.data.data.realFileName)
                        } else {
                            this.$message.error(data.data.msg);
                        }
                    }, (err) => {
                        this.$message.error(err.data.message);
                    })
                }
                this.editor.create();
                this.editor.txt.html(this.form.content)
                this.getchannellist()
            })

        },
        uptext() {
            //提交文章
            let json = {
                author: this.$store.state.user.info.profile.name,
                content: this.editor.txt.html().replace(/\%/g, '%25'),
                idChannel: this.form.idChannel,
                title: this.form.title,
                id:this.form.id
            }
            var type = true
            for (var i in json) {
                if (json[i] == '') {
                    type = false
                }
            }
            if (type) {
                this.$http.post(http + article, JSON.stringify(json)).then((data) => {
                    if (data.data.msg == '成功') {
                        this.$message({
                            message: '提交成功了',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(data.data.msg);
                    }

                }, (err) => {
                    this.$message.error(err.data.message);
                })
            } else {
                this.$message.error('请补全数据');
            }

            console.log(json)
        },
        getchannellist() {
            //获取分类
            this.$http.get(http + channellist).then((data) => {
                if (data.data.msg == '成功') {
                    this.channellistview = data.data.data
                } else {
                    this.$message.error(data.data.msg);
                }
                console.log(data.data)
            }, (err) => {
                this.$message.error(err.data.message);
            })
        }
    },
    watch: {
        type() {
            this.thistype = this.type
        },
        tablerow() {
            //浅拷贝变为深拷贝
            var json = {}
            for (var i in this.tablerow) {
                //		this.tablerow[i] = this.tablerow[i].toString()
                this.$set(json, i, this.tablerow[i].toString())
            }
            this.form = json
        }
    }
}
</script>

<style>

</style>
